<?php
function RenderPlayerProfile($id)
{
  ?>
  <div class="player-cards">
    <?php
      for($i = 0; $i< 8; $i++)
      {
        print '<img class="card-back" src="/img/cards/red_card_pattern.png" width="37" height="50"/>';
      }
    ?>
  </div>
  <div class="player-profile">
    <div class="player-progress">
      <input class="knob" data-width="50" data-height="50" data-displayInput=false data-thickness="0.15"  value="35">
    </div>
    <div class="player-name">
      <a>Player <?php print $id;?></a>
      <a>Rating: 120 <?php BuildTooltip($id);?></a>
    </div>
  </div>
<?php
}

function BuildTooltip($id)
{
  ?>
<span class="combination" title="Show me"></span>
<script type="text/javascript">
$('#player_<?php print $id?> .combination').tooltipsy({
        className: 'bubbletooltip_tip',
        offset: [0, 10],
        alignTo: 'element',
        content: 'Player <?php print $id;?> has <strong>4 Jackets</strong>',
        show: function (e, $el) {
            $el.fadeIn(100);
        },
        hide: function (e, $el) {
            $el.fadeOut(1000);
        }
    });
</script>
<?php
}
?>
